﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" src="/static/js/arrcity.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/js/zodiac.js"></script>
<div class="col-md-6 column">
	<h3 class="text-center">个人信息</h3>
	<div class="form-group">
		<label for="birthDate" class="col-sm-2 control-label">出生年月</label>
		<div class="col-sm-10">
				<input type="hidden" id="birthDate" name="birthDate" value="${user.birthDate}"  class="form-control form_datetime">
				<select id="YYYY" onchange="YYYYMM(this.value)" class="form-control" style="float:left;width: 25%;padding-left: 3px; padding-right: 5px; padding-top: 4px;">  
					<option value="">未知</option>
				</select>
				<select id="MM" onchange="MMDD(this.value)" class="form-control" style="float:left;width: 25%;padding-left: 3px; padding-right: 5px; padding-top: 4px;">  
					<option value="">未知</option>
				</select>
				<select id="DD" class="form-control" style="float:left;width: 25%;padding-left: 3px; padding-right: 5px; padding-top: 4px;">  
					<option value="">未知</option>
				</select>
		</div>
	</div>
	<div class="form-group">
		<label for="zodiac" class="col-sm-2 control-label">属相</label>
		<div class="col-sm-10">
			<input style="width:20%" class="form-control" id="zodiac" name="zodiac" readonly="readonly" type="text" />
		</div>
	</div>
	<div class="form-group">
		<label for="height" class="col-sm-2 control-label">身高</label>
		<div class="col-sm-10">
			<input style="float:left;width:20%" class="form-control" id="height" name="height" value="${user.height}" type="text" />
			<span style="position:absolute;top:20%;">&nbsp;&nbsp;厘米</span>
		</div>
	</div>
	<div class="form-group">
		<label for="weight" class="col-sm-2 control-label">体重</label>
		<div class="col-sm-10">
			<input style="float:left;width:20%" class="form-control" id="weight" name="weight" value="${user.weight}" type="text" />
			<span style="position:absolute;top:20%;">&nbsp;&nbsp;KG</span>
		</div>
	</div>
	<div class="form-group">
		<label for="qualifications" class="col-sm-2 control-label">学历</label>
		<div class="col-sm-10">
			<select style="float:left;width:20%" id="qualifications" name="qualifications" class="form-control">
				<option value="">未知</option>
				<option value="1">高中及以下</option>
				<option value="2">大专</option>
				<option value="3">本科</option>
				<option value="4">研究生</option>
				<option value="5">博士</option>
				<option value="6">博士以上</option>
			</select>
			<label style="width:20%" for="school" class="col-sm-2 control-label">毕业学校</label>
			<input style="width:30%" class="form-control" id="school" name="school" value="${user.school}" type="text" />
		</div>
	</div>
	<div class="form-group">
		<label for="annualEarning" class="col-sm-2 control-label">年收入</label>
		<div class="col-sm-10">
			<input style="float:left;width:20%" class="form-control" id="annualEarning" name="annualEarning" value="${user.annualEarning}" type="text" />
			<span style="position:absolute;top:20%;">&nbsp;&nbsp;万</span>
		</div>
	</div>
	<div class="form-group">
		<label for="lodging" class="col-sm-2 control-label">住房</label>
		<div class="col-sm-10">
			<input class="form-control" id="lodging" name="lodging" value="${user.lodging}" type="text" />
		</div>
	</div>
	<div class="form-group">
		<label for="car" class="col-sm-2 control-label">汽车</label>
		<div class="col-sm-10">
			<input class="form-control" id="car" name="car" value="${user.car}" type="text" />
		</div>
	</div>
	<div class="form-group">
		<label for="industry" class="col-sm-2 control-label">行业</label>
		<div class="col-sm-10">
			<input class="form-control" id="industry" name="industry" value="${user.industry}" type="text" />
		</div>
	</div>
	<div class="form-group">
		<label for="duties" class="col-sm-2 control-label">职务</label>
		<div class="col-sm-10">
			<input class="form-control" id="duties" name="duties" value="${user.duties}" type="text" />
		</div>
	</div>
	<div class="form-group">
		<label for="province" class="col-sm-2 control-label">户籍</label>
		<div class="col-sm-6">
			<select id="province" name="province" class="form-control" style="float:left;width: 45%;"> </select>
			<select id="city" name="city" class="form-control" style="float:right;width: 50%;"> </select>
		</div>
	</div>
	<div class="form-group">
		<label for="marriage" class="col-sm-2 control-label">婚史</label>
		<div class="col-sm-10">
			<select style="width:30%" id="marriage" name="marriage" class="form-control">
				<option value="">其他</option>
				<option value="未婚">未婚</option>
				<option value="离异">离异</option>
				<option value="丧偶">丧偶</option>
			</select>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		strYYYY = document.getElementById("YYYY").innerHTML+"\r\n";
		strMM = document.getElementById("MM").innerHTML+"\r\n";
		strDD = document.getElementById("DD").innerHTML+"\r\n";
		MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		
		//先给年下拉框赋内容
		var y = new Date().getFullYear();
		for (var i = (y-62); i <= (y-18); i++){
			strYYYY += "<option value='" + i + "'> " + i + "</option>\r\n";
		}
		document.getElementById("YYYY").innerHTML=strYYYY;
		
		//赋月份的下拉框
		for (var i = 1; i < 13; i++)  {
			strMM += "<option value='" + i + "'> " + i + "</option>\r\n";
		}
		document.getElementById("MM").innerHTML=strMM;
		
		var n = MonHead[new Date().getMonth()];
		if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
		writeDay(n); //赋日期下拉框
		
		$("#province").change(function(provinceName) {
			provinceChange($(this).val());
		});
		loadProvince();
		loadUser();
		$(".form_datetime").datetimepicker({
			format : 'yyyy-mm-dd',
			weekStart : 1,
			autoclose : true,
			startView : 2,
			minView : 2,
			forceParse : false,
			language : 'zh-CN'
		});
	});
	
	function loadProvince() {
		var provinceHtml = "";
		for (var i = 0; i < arrCity.length; i++) {
			provinceHtml += "<option value='"+arrCity[i].name+"'>" + arrCity[i].name + "</option>";
		}
		$("#province").html(provinceHtml);
	}
	
	function provinceChange(provinceName) {
		for (var i = 0; i < arrCity.length; i++) {
			if (arrCity[i].name == provinceName) {
				var cityHtml = "";
				for (var j = 0; j < arrCity[i].sub.length; j++) {
					cityHtml += "<option value='"+arrCity[i].sub[j].name+"'>" + arrCity[i].sub[j].name + "</option>";
				}
				$("#city").html(cityHtml);
			}
		}
	}
	
	function loadUser(){
		$("#qualifications").val('${user.qualifications}');
		$("#province").val('${user.province}');
		provinceChange('${user.province}');
		$("#zodiac").val('${user.zodiac}');
		$("#marriage").val('${user.marriage}');
		$("#city").val('${user.city}');
		var birthDate=${user.birthDate};
		if (birthDate==null || birthDate=="") return;
		if (birthDate.indexOf("-")) {
			var dateArr = birthDate.split("-");
			if (dateArr.length==2){
				$("#YYYY").val(dateArr[0]);
				$("#MM").val(dateArr[1]);
			}
			if (dateArr.length==3){
				$("#YYYY").val(dateArr[0]);
				$("#MM").val(dateArr[1]);
				$("#DD").val(dateArr[2]);
			}
		} else {
			$("#YYYY").val(birthDate);
		}
	}
	function YYYYMM(str)  { //年发生变化时日期发生变化(主要是判断闰平年)
		var mmObj = document.getElementById("MM");
		var MMvalue = mmObj.options[mmObj.selectedIndex].value;
		if (MMvalue == ""){document.getElementById("DD").innerHTML=strDD;return;}
		var n = MonHead[MMvalue - 1];
		if (MMvalue ==2 && IsPinYear(str)) n++;
		writeDay(n)
	}
	function MMDD(str) { //月发生变化时日期联动
		var yyyyObj = document.getElementById("YYYY");
		var YYYYvalue = yyyyObj.options[yyyyObj.selectedIndex].value;
		if (str == ""){document.getElementById("DD").innerHTML=strDD;return;}
		var n = MonHead[str - 1];
		if (str ==2 && IsPinYear(YYYYvalue)) n++;
		writeDay(n);
	}  
	function writeDay(n) { //据条件写日期的下拉框
		for (var i=1; i<(n+1); i++) {
			strDD += "<option value='" + i + "'> " + i + "</option>\r\n";
		}
		document.getElementById("DD").innerHTML=strDD;
	}
	function IsPinYear(year) { //判断是否闰平年
		return(0 == year%4 && (year%100 !=0 || year%400 == 0))
	}
</script>